<template>
  <div class="home">
    <p>{{ msg }}</p>
    <p>{{ count }}</p>
    <p>{{ shopname }}</p>
    <button @click="changeObj">修改obj的name值</button>
  </div>
</template>

<script setup>
// @ is an alias to /src
// 引入reactive使用
import { reactive } from 'vue';
// reactive定义复杂数据类型
let obj = reactive({
  msg: '信息',
  count: 10,
  shopname: '名称'
})
// 解构失去响应式
let { msg, count, shopname } = obj;

let changeObj = () => {
  // 不需要设置.value
  // 失去响应式了
  //  count = 100;
  obj.count = 100;
  console.log(obj);
}

</script>
